<!DOCTYPE html>
<html lang="vi">
<head>
    <!-- Force latest IE rendering engine or ChromeFrame if installed -->
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>[ChipVN] Image Uploader 5.1</title>
    <meta charset="utf-8">
    <meta name="author" content="ptcong90 a.k.a chiplove.9xpro">
    <meta name="keywords" content="chipvn image uploader, image uploader">
    <meta name="description" content="Upload images to Picasa, Flickr, ImageShack, Imgur..">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="js/jQuery-File-Upload-9.5.7/css/jquery.fileupload.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="header">
                <div class="title">Upload Photos</div>
                <i class="icon icon-cloud-upload"></i>
            </div><!--/.header-->
            <div class="content">
                <div id="loading"><img src="images/loading2.gif" /></div>
                <div class="options">
                    <div class="group">
                        <label>Upload from:</label>
                        <div class="control" id="upload-mode">
                            <a href="javascript:void(0);" class="active computer" data-mode="computer">Computer</a> |
                            <a href="javascript:void(0);" class="url" data-mode="url">URL</a>
                        </div>
                    </div>
                    <div class="group">
                        <label>Watermark:</label>
                        <div class="control">
                            <span class="check">
                                <i data-type="radio" data-name="watermark" data-value="1" class="icon icon-check-circle-o"></i> Yes
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="watermark" data-value="0" class="icon icon-circle-o" ></i> No
                            </span>
                        </div>
                    </div>
                    <div class="group">
                        <label>Watermark position:</label>
                        <div class="control">
                            <span class="check">
                                <i data-type="radio" data-name="watermark-position" data-value="br" class="icon icon-check-circle-o"></i> bottom-right
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="watermark-position" data-value="tr" class="icon icon-circle-o" ></i> top-right
                            </span>
                        </div>
                    </div>
                    <div class="group">
                        <label>Watermark logo:</label>
                        <div class="control">
                            <span class="check">
                                <i data-type="radio" data-name="watermark-logo" data-value="br" class="icon icon-check-circle-o"></i> bottom-right
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="watermark-logo" data-value="tr" class="icon icon-circle-o" ></i> top-right
                            </span>
                        </div>
                    </div>
                    <div class="group">
                        <label>Resize:</label>
                        <div class="control">
                            <span class="select">
                                <select name="resize">
                                    <option value="">Full size</option>
                                    <option value="100x">100x</option>
                                    <option value="150x">150x</option>
                                    <option value="320x">320x</option>
                                    <option value="640x">640x</option>
                                    <option value="800x">800x</option>
                                    <option value="1024x">1024x</option>
                                </select>
                                <i class="icon icon-caret-down"></i>
                            </span>
                        </div>
                    </div>
                    <div class="group">
                        <label>Server:</label>
                        <div class="control">
                            <span class="check">
                                <i data-type="radio" data-name="server" data-value="1" class="icon icon-check-circle-o"></i> Imgur
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="server" data-value="0" class="icon icon-circle-o" ></i> Imageshack
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="server" data-value="1" class="icon icon-circle-o"></i> Picasa
                            </span>
                            <span class="check">
                                <i data-type="radio" data-name="server" data-value="0" class="icon icon-circle-o" ></i> Flickr
                            </span>
                        </div>
                    </div>
                </div>
                <div class="upload-process"></div>
                <div class="transload-process">
                    <div class="input">
                        <textarea placeholder="Enter links here, each link separated by newline"></textarea>
                    </div>
                    <div class="list"></div>
                </div>
                <div id="results">
                    <div class="links">
                        <div class="tabs">
                            <div class="tab active" data-format="direct">Direct Link</div>
                            <div class="tab" data-format="bbcode">BB Code</div>
                            <div class="tab" data-format="html">HTML </div>
                        </div>
                        <textarea></textarea>
                    </div>
                </div><!--/#results-->
            </div><!--/.content-->
            <div class="content footer">
                <div class="group action upload">
                    <span class="button fileinput-button">
                        Add Files
                        <i class="icon icon-plus-circle"></i>
                        <input id="fileupload" type="file" name="files[]" multiple>
                    </span>
                    <button class="button green hide" id="upload">Upload <i class="icon icon-cloud-upload"></i></button>
                    <button class="button black hide" id="cancel-upload">Cancel <i class="icon icon-times-circle"></i></button>
                </div>
                <div class="group action transload">
                    <button class="button hide green" id="transload">Transload <i class="icon icon-cloud-upload"></i></button>
                    <button class="button hide black" id="cancel-transload">Cancel <i class="icon icon-times-circle"></i></button>
                </div>
                <div class="copyright">
                    Copyright &copy; 2010-2014 chiplove.9xpro
                </div>
            </div>
        </div><!--/.inner-->
    </div><!--/.wrapper-->
    <script src="js/jquery-1.11.0.min.js"></script>
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="js/jQuery-File-Upload-9.5.7/js/vendor/jquery.ui.widget.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="js/jQuery-File-Upload-9.5.7/js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="js/jQuery-File-Upload-9.5.7/js/jquery.fileupload.js"></script>

    <script src="js/imageuploader.js"></script>
</body>
</html>
